<template>
	<view class="container">
			
		<view class="module1">
			<view class="tab-item .font-size-base font-grey-666" :class="{'active' : currentTabIndex == tab.index}" @tap="onHandlerClickTap(index)" v-for="(tab,index) in tabs" :key="index">
				<text>{{ tab.tabText }}</text>
			</view>
		</view>
		
		<view class="module2">
			<view class="row">
				<view class="col"><text class="col-header font-size-base font-bold">降雨情况</text></view>
			</view>
			<view class="row border-bottom-line">
			</view>
			<view class="row">
				<block v-for="(item,index) in rainStatistics" :key="index">
					<view class="col">
						<view :style="{color:item.color}">
							<text class="font-size-lg">{{ item.rainData }}</text>
							<text class="font-size-sm">mm</text>
						</view>						
						<text class="cx-rain-area font-size-base font-grey-333" :style="{color: item.isSpace ? '#fff':'#333'}">{{ item.area }}</text>						
						<text class="font-size-base font-grey-999">{{ item.text }}</text>
					</view>
					<view class="separator" v-if="index < rainStatistics.length-1"></view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTabIndex : 0,
				tabs: [
					{
						tabText: '近1h',
						index: 0,
					},
					{
						tabText: '近3h',
						index: 1,
					},
					{
						tabText: '近6h',
						index: 2,
					},
					{
						tabText: '近12h',
						index: 3,
					},
					{
						tabText: '近24h',
						index: 4,
					}
				],
				rainStatistics: [
					{
						area: 'null',
						text: '全市面雨量',
						rainData: 50,
						color: '#007aff',
						isSpace: true
					},
					{
						area: '莲都区',
						text: '区域最大面雨量',
						rainData: 60,
						color: '#dd524d' ,
					},
					{
						area: '大渡口',
						text: '单站最大面雨量',
						rainData: 70,
						color: '#f0ad4e' ,
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			onHandlerClickTap(index) {
				this.currentTabIndex = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/style/font.scss";
	
	.container {
		background-color: $uni-bg-color-light-grey;
		height: 100%;
		position: absolute;
		width: 100%;
		left:0;
		top:0;
		.module1 {
			background-color: $uni-bg-color;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.tab-item {
				height: 80rpx;
				line-height: 80rpx;
			}
			.active {
				color: $uni-text-color-primary;
				font-weight: bold;
				border-bottom: 6rpx solid $uni-border-color-primary;
			}
		}
		.module2 {
			background-color: $uni-bg-color;
			padding-bottom: 30rpx;
			box-shadow: $box-shadow;
			margin-top: 20rpx;
			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.col {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					padding: 0 28rpx;
					.col-header {
						height: 60rpx;
						line-height: 60rpx;
					}
					.cx-rain-area {
						padding: 10rpx 0;
					}
				}				
				.separator {
					width: 1px;
					height: 70rpx;
					background-color: #E5E5E5;
					border-radius: $uni-border-radius-base;
				}
			}
			.border-bottom-line {
				background-color: #E5E5E5;
				height: 1rpx;
				margin: 0 0 26rpx 0;
			}
		}
	}
</style>
